<!--  模板 -->
<template>
  <div id="app">
    <div class="bigAction">
      <h1 text="但行好事 莫问前程">但行好事 莫问前程</h1>
    </div>
    <div class="min-w1190 sarch-logo-box common-header">
      <div class="header min-w1190">
        <!--company-logo-->
        <div class="company-logo-warp">
          <div class="company-logo-box company-item">
            <a href="//www.baidu.com/">
              <img src="./assets/imgs/logo.png" alt="" />
            </a>
          </div>
        </div>
        <!--导航-->
        <div class="nr-nav" id="nr-nav">
          <ul>
            <li id="newIndex" :class="isNew === 1?'active':''" class="nr-nav-lis">
              <a href="javascript:void(0)" v-on:click="jump(1)">首页</a>
            </li>
            <li  id="financingProducts" :class="isNew === 2?'active':''" class="nr-nav-lis">
              <a href="javascript:void(0)" v-on:click="jump(3)" >相关知识</a>
            </li>
            <li  id="insuranceGuarantee" :class="isNew === 7?'active':''" class="nr-nav-lis">
              <a href="javascript:void(0)" v-on:click="jump(7)" >AntV</a>
            </li>
            <li id="creditCard" :class="isNew === 4?'active':''" class="nr-nav-lis">
              <a href="javascript:void(0)" v-on:click="jump(4)">动画欣赏</a>
            </li>
            <li id="creditCard" :class="isNew === 6?'active':''" class="nr-nav-lis">
              <a href="javascript:void(0)" v-on:click="jump(6)">音乐聆听</a>
            </li>
            <li id="financialClub" :class="isNew === 5?'active':''" class="nr-nav-lis">
              <a href="javascript:void(0)" v-on:click="jump(5)" >关于我</a>
            </li>
            <li id="financialClub" :class="isNew === 8?'active':''" class="nr-nav-lis">
              <a href="javascript:void(0)" v-on:click="jump(8)" >甘特图</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div>
      <router-view class="marTop1"/><!-- 路由引用-->
    </div>
    <div class="foot">
      <div class="xxx">网站备案号：鲁ICP备2021042171号-1</div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      isNew: 1,
    }
  },
  watch: {
    
  },
  created () {
    this.jump(8)
  },
  methods: {
    jump: function (type) {
      switch (type) {
        case 1:
          this.isNew = 1
          this.$router.push('/index')
          break
        case 2:
          this.isNew = 2
          this.$router.push('/new/ymxgzs')
          break
        case 3:
          this.isNew = 3
          this.$router.push('/new/ymxmtp')
          break
        case 4:
          this.isNew = 4
          this.$router.push('/new/ymdhxs')
          break
        case 5:
          this.isNew = 5
          this.$router.push('/new/ymgywm')
          break
        case 6:
          this.isNew = 6
          this.$router.push('/new/ymtyy')
          break
        case 7:
          this.isNew = 7
          this.$router.push('/new/eCharts')
          break
        case 8:
          this.isNew = 8
          this.$router.push('/new/mygantetu')
          break
        default:
          break
      }
    },
  }
}
</script>

<style>
body {
  display: block;
  margin: 0px;
}
.marTop1{
  padding-top: 165px;
  /* border: 1px solid #aabbcc; */
}
.bigAction{
  position: fixed;
  width: 100%;
  height:100px;
  line-height: 60px;
  left: 0;
  top: 0;
  z-index: 999;
  text-align: center;
  background: url("./assets/imgs/top.jpg")
    center top no-repeat;
  background-size:cover;
  /* background-image: linear-gradient(to right, #bbccaa,#aabbcc, #ccbbaa); */
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.min-w1190 {
  min-width:1190px;
}
.header {
  height: 65px;
  display: flex;
  justify-content: center;
  align-items:center;
}
.common-header {
  background-color: #fff;
  border-bottom: 1px solid #e1e1e1;
  width: 100%;
  position: fixed;
  left: 0;
  padding-top: 100px;
  z-index: 100;
}
.company-logo-warp {
  width: 200px;
  height: 65px;
}
.company-logo-warp .company-logo-box img {
  width: 200px;
  height: 65px;
}

.nr-nav {
  width: 988px ;
  height: 92px;
}
ul,li,li a{
  text-decoration:none;
  list-style:none
}
.nr-nav ul .nr-nav-lis {
  position: relative;
  line-height: 64px;
  float: left;
  font-size: 16px;
  margin-right: 50px;
  padding: 0 14px 0 14px;
  font-family: Microsoft YaHei;
}
.nr-nav .active ::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 3px;
  background-color: #2F7BFF;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.nr-nav ul .active a{
  color:#2F7BFF !important;
}
.nr-nav ul .jrdxd img{
    width: 188px;
    margin-top: -20px;
}
.nr-nav ul .nr-nav-lis a:hover{
  cursor:pointer;
  color:#2F7BFF;}
.nr-nav ul .nr-nav-lis a{
  color:#222222;
  font-weight: bold; 
  font-family: PingFangSC-Regular, Microsoft YaHei !important;
}
.titles h2{
  display:inline-block;
  font-size:38px;
  font-weight:bold;
  padding-bottom:20px;
  color:#222222;
  background:url("//image01.homedo.com/Files/Images/cms/www/20180620/4841645547909337125_pic1.png") no-repeat center bottom;}
.titles{
  padding-top:40px;
  text-align:center;
}
.clear-box {zoom:1}
.clear-box::after {
  content: "";
  display:block;
  overflow: hidden;
  clear: both;
  height: 0;
  line-height: 0;
  font-size: 0;
}
.foot{
  width: 100%;
  text-align: center;
}
.foot .xxx{
  height: 80px;
  line-height: 80px;
  border-top: 1px solid #f6f6f6;
  margin-top: 30px;
}
h1{
  position: relative;
  color: rgb(92, 105, 218);
}
h1:before{
  content: attr(text);
  position: absolute;
  z-index: 10;
  color:pink;
  -webkit-mask:linear-gradient(to left, red, transparent );
}
</style>
